<template>
	<div>
		<ul v-loading style="height: 200px">
			<li v-for="item in list" :key="item.name">
				{{ `${item.name}:${item.money}` }}
			</li>
		</ul>
		<button @click="questData">获取数据</button>
	</div>
</template>

<script>
//根目录的路径用/表示
import axios from 'axios'
//chrome666.com
//前端助手
export default {
	data() {
		return {
			//初始值的数据类型，一定要和接口数据类型一致
			list: [],
			show: false,
		}
	},
	methods: {
		questData() {
			this.show = true
			//axios的基础使用
			//http://www.ivsky.com/
			axios
				.get('/data.json')
				.then((result) => {
					if (result.status === 200 && result.data.code === 1) {
						//获取到数据，渲染到页面TODO:
						this.list = result.data.result
					} else {
						alert('网络请求失败。稍后重试！')
					}
				})
				.finally(() => (this.show = false))
		},
	},
}
</script>

<style>
</style>

